<template>
	<view class="nav-bar">
		<view class="nav-con">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="title-bar" :style="{height: titleBarHeight+'px'}">
				<view class="title">{{title}}</view>
				<view class="search">
					<uni-icons class="icons" type="search"></uni-icons>
					<text class="text">搜索</text>
				</view>
			</view>
		</view>
		<view :style="{height: (statusBarHeight+ titleBarHeight)+'px'}"></view>
	</view>
</template>

<script setup>
import { getStatusBarHeight,getTitleBarHeight } from '../../utils/system.js'
const statusBarHeight = getStatusBarHeight()
const titleBarHeight = getTitleBarHeight()
defineProps({
	title: {
		type: String,
		default: '标题'
	}
})
</script>

<style lang="scss" scoped>
.nav-bar{
	.nav-con{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background: linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8);
		.title-bar{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.title{
				font-size: 44rpx;
				font-weight: 700;
				color: $text-font-color-1;
			}
			.search{
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				width: 250rpx;
				height: 50rpx;
				border-radius: 60rpx;
				background-color: rgba(255, 255, 255, 0.4);
				border: 1rpx solid #fff;
				font-size: 28rpx;
				color: #999;
				.icons{
					margin-left: 8rpx;
				}
				.text{
					padding-left: 12rpx;
				}
			}
		}
	}
}
</style>